import React from 'react'

export default function (WrapperComponent) {
  class Mouse extends React.Component {
    // 鼠标位置状态
    state = {
      x: 0,
      y: 0
    }

    // 监听鼠标移动事件
    componentDidMount() {
      window.addEventListener('mousemove', this.handleMouseMove)
    }

    componentWillUnmount() {
      window.removeEventListener('mousemove', this.handleMouseMove)
    }
    handleMouseMove = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY
      })
    }
    render() {
      return (
        <WrapperComponent {...this.state} {...this.props}></WrapperComponent>
      )
    }
  }
  console.log(`with${getDisplayName(WrapperComponent)}`)
  Mouse.displayName = `with${getDisplayName(WrapperComponent)}`
  return Mouse
}

function getDisplayName(WrapperComponent) {
  return WrapperComponent.name || WrapperComponent.displayName || 'Component'
}
